<template>
  <div class="container">
    <BasicTable @register="registerTable" class="table-container">
      <template #headerTop>
        <Button
          type="primary"
          @click="handleAdd(CustomModalTypeEnum.Add)"
          style="margin-right: 10px"
          >新增</Button
        >
        <Button type="primary" @click="handleGoupAdd">会员职务分组</Button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '编辑',
                tooltip: '编辑',
                onClick: () => handleAdd(CustomModalTypeEnum.Edit, record),
              },

              {
                label: `${dataStatusOprationEnumText[record.disabled]}`,
                tooltip: `${dataStatusOprationEnumText[record.disabled]}`,
                onClick: () => handleDisabled(record),
              },
              {
                label: '删除',
                tooltip: '删除',
                popConfirm: {
                  title: '是否确认删除',
                  confirm: () => handleDel(record),
                },
              },
            ]"
        /></template>
      </template>
      <template #disabled="{ record }">
        <Badge
          v-if="record.disabled === DataStatusEnum.Normal"
          status="success"
          :text="dataStatusEnumText[DataStatusEnum.Normal]"
        />
        <Badge v-else status="default" :text="dataStatusEnumText[DataStatusEnum.Disable]" />
      </template>
      <template #orgInit="{ record }">
        <Switch
          :checked="record.orgInit === OrgInitEnum.OpenOrgInit"
          @click="handleOrgInit(record)"
        ></Switch>
      </template>
    </BasicTable>
    <AddedModal @register="register" @reload="handleReload" />
    <MembershipTitleGoupModal
      @register="goupRegister"
      @reload="handleReload"
    ></MembershipTitleGoupModal>
  </div>
</template>
<script lang="ts" setup>
  /** 会员职务 */
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { getSaasColumns } from './tableData';
  import { Button, Badge, Switch } from 'ant-design-vue';

  import {
    CustomModalTypeEnum,
    DataStatusEnum,
    OrgInitEnum,
    dataStatusEnumText,
    dataStatusOprationEnumText,
    orgInitEnumEnumText,
  } from '@/enums/publicEnum';
  import AddedModal from './modal/added.vue';
  import { useModal } from '@/components/Modal';
  import { useMessage } from '@/hooks/web/useMessage';
  import MembershipTitleGoupModal from './modal/MembershipTitleGoupModal/index.vue';
  import {
    delMembershipTitle,
    getMembershipTitleGroup,
    getMembershipTitleList,
    updMembershipTitleStatus,
  } from '@/api/platform/fieldValueManage/membershipTitle';
  import { MembershipTitle } from '@/api/platform/fieldValueManage/membershipTitle/type';
  import { computed, ref } from 'vue';
  const { createMessage } = useMessage();

  const key = ref('');
  const [registerTable, { reload, setProps }] = useTable({
    api: getMembershipTitleList,
    columns: getSaasColumns(),
    showIndexColumn: true,
    clickToRowSelect: false,
    useSearchForm: true,
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    actionColumn: {
      width: 120,
      title: '操作',
      fixed: 'right',
      dataIndex: 'action',
    },
    formConfig: {
      labelWidth: 100,
      schemas: [
        {
          field: 'keyword',
          label: '关键词',
          component: 'Input',
          componentProps: {
            placeholder: '会员职务名称、所属分组搜索',
          },
          colProps: {
            span: 6,
          },
        },
        {
          field: 'positionGroupId',
          label: '职务组别',
          colProps: {
            span: 6,
          },
          component: 'ApiSelect',
          componentProps: {
            api: getMembershipTitleGroup,
            params: { current: 1, size: 100 },
            labelField: 'groupName',
            valueField: 'id',
            showSearch: true,
            key: computed(() => key.value),
            filterOption: (input: string, option: any) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
            },
          },
        },
        {
          field: 'disabled',
          label: '状态',
          component: 'Select',
          colProps: {
            span: 5,
          },
          componentProps: {
            options: [
              { label: '全部', value: '' },
              { label: dataStatusEnumText[DataStatusEnum.Normal], value: DataStatusEnum.Normal },
              { label: dataStatusEnumText[DataStatusEnum.Disable], value: DataStatusEnum.Disable },
            ],
          },
        },
        {
          field: 'orgInit',
          label: '初始值',
          component: 'Select',
          colProps: {
            span: 5,
          },
          componentProps: {
            options: [
              { label: '全部', value: '' },
              {
                label: orgInitEnumEnumText[OrgInitEnum.CloseOrgInit],
                value: OrgInitEnum.CloseOrgInit,
              },
              {
                label: orgInitEnumEnumText[OrgInitEnum.OpenOrgInit],
                value: OrgInitEnum.OpenOrgInit,
              },
            ],
          },
        },
      ],
    },
  });

  const [register, { openModal }] = useModal();

  function handleAdd(type: CustomModalTypeEnum, row?: Partial<MembershipTitle>) {
    openModal(true, {
      type,
      row,
    });
  }

  const handleDisabled = async (row: MembershipTitle) => {
    let disabled = DataStatusEnum.Normal;
    let disabledMsg = '启用成功！';
    if (row.disabled === DataStatusEnum.Normal) {
      disabled = DataStatusEnum.Disable;
      disabledMsg = '禁用成功！';
    } else {
      disabled = DataStatusEnum.Normal;
      disabledMsg = '启用成功！';
    }
    await updMembershipTitleStatus({ id: row.id, disabled });
    createMessage.success(disabledMsg);
    reload();
  };

  const handleOrgInit = async (row: MembershipTitle) => {
    let orgInit = OrgInitEnum.OpenOrgInit;
    let orgInitMsg = '开启初始值成功！';
    if (row.orgInit === OrgInitEnum.OpenOrgInit) {
      orgInit = OrgInitEnum.CloseOrgInit;
      orgInitMsg = '关闭初始值成功！';
    } else {
      orgInit = OrgInitEnum.OpenOrgInit;
      orgInitMsg = '开启初始值成功！';
    }
    await updMembershipTitleStatus({ id: row.id, orgInit });
    createMessage.success(orgInitMsg);
    reload();
  };

  const [goupRegister, { openModal: openGoupModal }] = useModal();

  function handleGoupAdd() {
    openGoupModal(true);
  }

  const handleDel = async (row: MembershipTitle) => {
    await delMembershipTitle(row.id);
    createMessage.success('删除成功！');
    reload();
  };

  const handleReload = () => {
    key.value = new Date().toString();
    reload();
  };
</script>

<style lang="less" scoped></style>
